<template>
	<view>
		<view class="rent-info white-bg mb-24">
			<view class="title">{{ dataform.title }}</view>
			<view style="color: #A6A6A6;margin-top: 24rpx;">
				<text style="margin-right: 18rpx;">编号：{{dataform.id}}</text>
				<text>更新时间：{{dataform.updateTime}}</text>
			</view>
			<view class="acea-row rent-types pd-t-b-24 border-b">
				<view class="type" v-for="(item,index) in (dataform.serviceCharacteristics?dataform.serviceCharacteristics.split('/'):[])" :key="index">{{item}}</view>
			</view>
			
			<view class="acea-row  pd-t-b-24 row-between">
				<!-- 浏览、咨询统计 -->
				<view class="acea-row row-middle visit-box  row-between  border-b">
					<view class="visit-advtar" @click="toVisitor">
						<image :src="m.avatar" mode=""
							v-for="(m,ind) in dataform.managementResponse?dataform.managementResponse:[]" :key="ind"
							:style="{left: (20 * ind) + 'rpx'}"></image>
					</view>
				</view>
				<view class="acea-row visit-info row-middle">
					<view @click="toVisitor">{{ dataform.view || 0 }}人浏览</view>
					<view>{{dataform.communication &&dataform.communication != 0? dataform.communication : ((Math.floor(Math.random() * (500 - 50 + 1)) + 50))}}人咨询</view>
					<!-- <view class="visit-num" @click="toMatch" style="color: red;">信息匹配</view> -->
				</view>

				<!-- <view>50人感兴趣</view> -->

				<view class="acea-row row-middle row-right share-btns" style="">
					<button open-type="share">
						<image src="../static/images/wechat_icon.png" mode=""></image>
						<!-- <view style="font-size: 23rpx;">微信</view> -->

					</button>
					<button @click="toReport" style="margin-left: 15rpx;">
						<image src="../static/images/report_icon.png" mode=""></image>
						<!-- <view style="font-size: 23rpx;">举报</view> -->
					</button>
				</view>
			</view>
		</view>
		<view class="module-box white-bg mb-24">
			<view class="module-title">求购详情</view>
			<view class="acea-row row-middle row-between pd-t-b-24">
				<view class="acea-row row-middle w-48 pd-t-b-24">
					<view class="label">商品名称</view>
					<view class="text">{{ dataform.commodityName || '' }}</view>
				</view>
				<view class="acea-row row-middle w-48 pd-t-b-24">
					<view class="label">商品类别</view>
					<view class="text">{{ dataform.categoryName || '' }}</view>
				</view>
				<view class="acea-row row-middle w-48 pd-t-b-24">
					<view class="label">商品数量</view>
					<view class="text">{{ (dataform.smallQuantities || 0) +(dataform.largeQuantities?'-'+dataform.largeQuantities:'') }}</view>
				</view>
				<view class="acea-row row-middle w-48 pd-t-b-24">
					<view class="label">计量单位</view>
					<view class="text">{{ dataform.unitName || '' }}</view>
				</view>

				<view class="acea-row row-middle pd-t-b-24" style="width: 100%;">
					<view class="label">商品价格</view>
					<view class="text">{{ (dataform.smallPrice || 0)+(dataform.bigPrice?'-'+dataform.bigPrice:'') }}</view>
				</view>
				<view class="acea-row row-middle">
					<view class="supplement pd-t-b-24">
						<view class="label">补充说明</view>
						<view class="text pd-t-b-24" style="width: 100%;">
							{{ dataform.details || ''}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 联系人 -->
		<view class="module-box white-bg mb-24">
			<contacts-list :list="dataform.contacts" :info="dataform"></contacts-list>
		</view>
		<view class="uni-p-b-98"></view>
		<countDown ref="countDown" />
		<report :link-id="dataform.infos" :types="type == 0?1:2" ref="report" />
		<detail-footer :contact="dataform" :info="dataform"></detail-footer>
	</view>
</template>

<script>
	import detailFooter from '../components/footer/footer.vue'
	import contactsList from '../components/contactsList/contactsList.vue'
	import countDown from '@/pages/details/components/countDown.vue'
	import report from "@/pages/details/components/goods_report/report.vue"

	
	import {
		getSuppleBegList,
		getSuppleBegDetail
	} from "@/api/api.js";
	import app from '../../../store/modules/app'

	export default {
		components: {
			detailFooter,
			contactsList,
			countDown,
			report
		},
		onLoad(option) {

			this.mind = option.mind ? option.mind : this.mind
			let id = option.id;

			if (option.spread) {
				id = option.id;
				let spreadType = getApp().globalData.spreadType;
				this.shareInfo.shareId = option.spread
				this.shareInfo.infoType = spreadType;
			} else {
				this.shareInfo.infoType = this.type == 0 ? 2 : 3;
			}
			this.shareInfo.infoId = id;
			this.toDetail(id);

		},
		data() {
			return {
				rentTypes: [1, 2, 3],
				dataform: {},
				shareInfo: {
					isInitStatus: 0,
					shareId: '',
					infoId: '',
					infoType: 2,
				},
				mind: '',
				type: 0, //0求租 1求购
				detailInfo:{
					storeCategory:''
				}
			};
		},
		methods: {
			toDetail(id) {
				if (this.$location && this.$location.latitude && this.$location.longitude) {
					this.getList(id);
				} else {
					setTimeout(() => {
						this.toDetail(id);
					}, 800)
				}
			},
			toMatch(){
				uni.navigateTo({
					url: "/pages/aboutUsers/aboutUsers/match?data=" + JSON.stringify(
						this.dataform)
				})
			},
			//
			async getList(id) {
				uni.showLoading({
					title: "加载中"
				})
				try {
					let {
						data
					} = await getSuppleBegDetail(id);
					this.shareInfo.isInitStatus = 1;
					this.dataform = data;
					this.dataform.infos = this.id;
					uni.hideLoading()
				} catch (e) {
					console.log('报错', e)
					uni.hideLoading()
					//TODO handle the exception
				}
			},
			toReport() {
				this.$refs.report.open();
			},
			toVisitor() {
				console.log('--', this.dataform)
				uni.navigateTo({
					url: "/pages/aboutUsers/aboutUsers/visitor?mind=" + this.mind + "&data=" + JSON.stringify(this.dataform)
				})
			},
		}
	}
</script>

<style lang="scss">
	@import "../static/css/index.scss";

	.rent-info {
		padding: 30rpx;

		.title {
			font-size: 40rpx;
			font-weight: 400;
			color: rgba(0, 0, 0, 1);

			text {
				font-size: 32rpx;
				font-weight: 500;
				color: rgba(0, 0, 0, 1);
			}
		}
	}

	.rent-types {
		.type {
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(238, 33, 45, 1);
			padding: 10rpx 36rpx;
			border-radius: 10rpx;
			background: rgba(255, 232, 234, 1);
			margin-right: 28rpx;
		}
	}

	.visit-info {
		font-size: 24rpx;
		font-weight: 400;
		color: rgba(166, 166, 166, 1);

		view {
			margin-right: 24rpx;
		}
	}
</style>